<template>
  <div>
    <el-dialog
      title="修改学科"
      :visible.sync="updateDialog"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-form :model="updateFrom" ref="updateFrom" :rules="rules">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input
              v-model="updateFrom.subjectName"
              autocomplete="off"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="updateFrom.isFrontDisplay"
              active-color="#13ce66"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer">
        <el-button @click="$emit('closed')">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { update } from '@/api/hmmm/subjects.js'
export default {
  props: {
    updateDialog: {
      type: Boolean
    },
    loadList: {
      type: Function,
      required: true
    },
    updateFrom: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rules: {
        subjectName: [
          { required: true, message: '学科名称不能为空', trigger: 'blur' },
          { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async confirm() {
      this.$refs.updateFrom.validate(async (val) => {
        try {
          if (!val) return
          await update(this.updateFrom)
          this.$message.success('修改学科成功')
        } catch (err) {
          this.$message.error('修改学科失败')
        }
        this.$emit('closed')
        this.loadList()
      })
    },
    handleClose() {
      this.$emit('closed')
      this.$refs.updateFrom.resetFields()
    }
  }
}
</script>

<style></style>
